<template>
  <div class="app-container xjAdd">
    <el-form :model="formParams" :rules="rules" ref="formParams" label-width="120px" class="demo-formParams">
      <p>新增</p>
      <el-card class="margin-bottom-15">
        <el-descriptions title="领导信息" :column="3" border></el-descriptions>
        <el-row>
          <el-col :span="8">
            <el-form-item label="组长" prop="zz" :rules="[{ required: true, message: '请输入组长' }]">
              <el-input clearable v-model="formParams.zz" placeholder="请输入组长">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="副组长" prop="fzz" :rules="[{ required: true, message: '请输入副组长' }]">
              <el-input clearable v-model="formParams.fzz" placeholder="请输入副组长，多个请用英文逗号(,)隔开" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="margin-bottom-15 gzzxx">
        <el-descriptions title="工作组信息" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="addJfxItem">新增</el-button>
          </template>
        </el-descriptions>
        <el-table :data="formParams.groupList">
          <el-table-column label="工作组名称" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.isEdit">
                <el-form-item
                  :prop="'groupList.' + scope.$index + '.groupName'"
                  label=""
                  :rules="[
                    { required: true, message: '请输入工作组名称', trigger: 'blur' },
                  ]"
                >
                  <el-input clearable v-model="scope.row.groupName" placeholder="请输入工作组名称"></el-input>
                </el-form-item>
              </div>
              <div v-show="!scope.row.isEdit">
                <span>{{ scope.row.groupName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="牵头部门" align="center" prop="deptName" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-show="scope.row.isEdit">
                <el-form-item
                  :prop="'groupList.' + scope.$index + '.deptName'"
                  label=""
                  :rules="[
                    { required: true, message: '请输入牵头部门', trigger: 'blur' },
                  ]"
                >
                  <el-input clearable v-model="scope.row.deptName"  placeholder="请输入牵头部门"></el-input>
                </el-form-item>
              </div>
              <div v-show="!scope.row.isEdit">
                <span>{{ scope.row.deptName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="负责领导" align="center" prop="leaderName">
            <template slot-scope="scope">
              <div v-show="scope.row.isEdit">
                <el-form-item
                  :prop="'groupList.' + scope.$index + '.leaderName'"
                  label=""
                  :rules="[
                    { required: true, message: '请输入负责领导', trigger: 'blur' },
                  ]"
                >
                  <el-input placeholder="请输入负责领导" v-model="scope.row.leaderName" />
                </el-form-item>
              </div>
              <div v-show="!scope.row.isEdit">
                <span>{{ scope.row.leaderName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="显示顺" align="center" prop="sort">
            <template slot-scope="scope">
              <div v-show="scope.row.isEdit">
                <el-form-item
                  :prop="'groupList.' + scope.$index + '.sort'"
                  label=""
                  :rules="[
                    { required: true, message: '请输入排序，按数值降序', trigger: 'blur' },
                  ]"
                >
                  <el-input placeholder="请输入排序，按数值降序" v-model="scope.row.sort" />
                </el-form-item>
              </div>
              <div v-show="!scope.row.isEdit">
                <span>{{ scope.row.sort }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope" >
              <el-button v-show="!scope.row.isEdit"
                size="mini"
                type="text"
                @click="editRow(scope.row)"
              >编辑</el-button>
              <!-- <el-button v-show="!scope.row.isEdit"
                size="mini"
                type="text"
                @click="delRow(scope.$index)"
              >删除</el-button> -->
              <el-popconfirm @confirm = "delRow(scope.$index)" title="确定删除当前行吗？">
                <el-button type="text" size="mini" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-button v-show="scope.row.isEdit"
                size="mini"
                type="text"
                @click="sureRow(scope.row)"
              >确认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-form-item style="text-align: center; margin-left: 0">
        <el-button type="primary" @click="submitForm('formParams')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { upload } from '@/api/common';
import { getPlace,listPlace } from '@/api/ptsj/place';
import { listInfo } from '@/api/ptsj/info';
import { addInspection } from '@/api/ptsj/inspection';
import { addDzzd,getDzzd,updateDzzd  } from '@/api/ptsj/dzzd';

export default {
  name: 'add',
  // dicts: ['ptsj_score_plus', 'ptsj_score_redution', 'ptsj_red_card_item', 'ptsj_yellow_card_item', 'ptsj_blue_card_item'],
  data() {
    return {
      formParams: {
        zz: '',
        fzz: '',
        groupList: [],
      },
      id:'',
      rules: {
        roomProblem: [
          { required: true, message: '请输入存在的问题', trigger: 'blur' },
        ]
      },
      groupList: [],
      handleSjfkVisible: false,
      
    }
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id
      this.getDzzd(this.id);
    }
    
  },
  methods: {
    // 获取详情信息
    getDzzd(id){
      getDzzd(id).then(res=>{
        let newList = [];
        this.formParams.zz = res.data.dzzd.zz;
        this.formParams.fzz = res.data.dzzd.fzz;
        res.data.groupInfoList.forEach(item=>{
          // let content = item;
          // content.isEdit =false;
          // newList.push(content)
          item.isEdit = false;
        })
        this.formParams.groupList = res.data.groupInfoList;
        console.log(this.groupList)
      })
    },
    // 新增工作组
    addJfxItem() {
      this.formParams.groupList.push({
        groupName: '',
        deptName: '',
        leaderName: '',
        sort: '',
        isEdit: true
      })
    },
    editRow(row) {
      console.log('dddd')
      row.isEdit = true;
      console.log(row)
    },
    sureRow(row) {
      row.isEdit = false;
      console.log(this.groupList)
    },
    delRow(index){
      this.formParams.groupList.splice(index,1);
      // let that = this;
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     that.groupList.splice(index,1);
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     });
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });          
      //   });
      
      // confirm
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = this.formParams;
          params.workGroup = JSON.stringify(this.formParams.groupList);
          // console.log(params)
          if(this.id){
            params.id = this.id;
            await updateDzzd(params).then(res => {
              // console.log(res)
              if(res.code == 200) {
                this.$message.success('更新成功!');
                // this.groupList = []
                // this.$refs.formParams.resetFields();
              }
            })
          }else{
            await addDzzd(params).then(res => {
              // console.log(res)
              if(res.code == 200) {
                this.$message.success('新增成功!');
                this.groupList = []
                this.$refs.formParams.resetFields();
              }
            })
          }
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 清空数据
    clearFormParams() {
      this.formParams = {
        zz: '',
        fzz: '',
      },
      this.groupList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.margin-bottom-15 {
  margin-bottom: 15px;
  margin-bottom: 50px;
}
</style>

<style scoped>
.xjAdd >>> .el-descriptions__title {
  font-weight: normal;
  border-left: 4px solid rgb(110, 172, 238);
  padding-left: 15px;
}
.xjAdd >>> .el-form-item__label {
  font-weight: normal;
}
.gzzxx >>> .el-form-item__content {
  margin-left: 0 !important;
}
</style>